<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h2>这里的下面是路由哟</h2>
    <!-- 路由导航 to表示路由路径 -->
    <router-link to="/index" tag="button">首页</router-link>
    <router-link to="/home/'路边的小石子'" tag="button">home页</router-link>
    <router-link to='/about' tag="button">about页</router-link>
    <!-- 路由出口，路由匹配道德组件将渲染在这里 -->
    <router-view></router-view>
  </div>
  <!-- 定义路由模板 -->
  <template id="home">
    <div>
      <h3>我是home页</h3>
      {{this.$route.params.msg}}
    </div>
  </template>
  <template id="index">
    <div>
      <h3>我是index页</h3>
    </div>
  </template>
  <template id="about">
    <h3>我是about页</h3>
  </template>
  <!-- 定义路由模板 -->
  <script src="../vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    //定义路由组件
    const index = { template: '#index' }
    const home = { template: '#home' }
    const about = { template: '#about' }
    // 路由规则
    const routes = [
      {
        path: "/index", //表示路由路径
        component: index  //表示路由路径对应的组件
      },
      {
        path: '/home/:msg',
        component: home
      },
      {
        path: '/about',
        component: about
      }]
    //创建路由对象
    const router = new VueRouter({
      routes  //将路由规则添加到路由对象中
    })
    const app = new Vue({
      el: '#app',
      router  //将路由对象挂载到vue实例上
    })
  </script>
</body>

</html>